<template>
  <el-dropdown id="lang" @command="handleCommand">
    <i
      class="iconfont"
      :class="
        locale == 'zh-cn'
          ? 'icon-zhongyingwenqiehuan-zhongwen'
          : 'icon-zhongyingwenqiehuan-yingwen'
      "
    ></i>

    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn" :disabled="locale == 'zh-cn'"
          >中文</el-dropdown-item
        >
        <el-dropdown-item command="en" :disabled="locale == 'en'"
          >English</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
const store = useStore();
const { locale } = useI18n();

const handleCommand = (command) => {
  locale.value = command;
  sessionStorage.setItem("language", command);
  store.commit("check/changeLang", command);
};
</script>

<style lang="scss" scoped>
i {
  margin-top: 2px;
  color: #00dfc4;
  font-size: 26px;
}
:deep() {
  .el-dropdown {
    background: red;
  }
}
</style>
